﻿@namespace DevToys.Blazor.Components

@inherits JSStyledComponentBase

<CascadingValue Name="ParentIsEnabled" Value="@IsActuallyEnabled">
    <Container HorizontalAlignment="@HorizontalAlignment"
               VerticalAlignment="@VerticalAlignment"
               Width="@Width"
               Height="@Height"
               MarginLeft="@MarginLeft"
               MarginRight="@MarginRight"
               MarginTop="@MarginTop"
               MarginBottom="@MarginBottom"
               PaddingLeft="@PaddingLeft"
               PaddingRight="@PaddingRight"
               PaddingTop="@PaddingTop"
               PaddingBottom="@PaddingBottom"
               IsEnabled="@IsActuallyEnabled"
               IsVisible="@IsVisible">
        <label
            id=@Id
            role="button"
            class="checkbox-container @(IsActuallyEnabled ? string.Empty : "disabled")"
            style="@(Style)"
            @onclick:stopPropagation="@IsActuallyEnabled"
            @ref=Element>
            <span class="checkbox-inner">
                <input
                    type="checkbox"
                    tabindex="0"
                    class="checkbox @(FinalCssClasses)"
                    checked="@IsChecked"
                    disabled="@(!IsActuallyEnabled)"
                    @onclick:preventDefault="@(!IsActuallyEnabled)"
                    @onkeydown:stopPropagation="@IsActuallyEnabled"
                    @onchange="OnChange"
                    @attributes="AdditionalAttributes" />
                <svg
                    aria-hidden="true"
                    class="checkbox-glyph"
                    viewBox="0 0 24 24">
                    <path
                        class="path-checkmark"
                        d="M 4.5303 12.9697 L 8.5 16.9393 L 18.9697 6.4697"
                        fill="none" />
                </svg>
            </span>
            <TextBlock Text="@Text" />
        </label>
    </Container>
</CascadingValue>